<!--
  Generated template for the RoomPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title><span [innerHtml]='roomData?.nickname'></span>的直播间</ion-title>
  </ion-navbar>

  <div class="video-area">
    <div class="player">
      <!-- <video id="dy-video-player" class="video-js" type="application/x-mpegURL" webkit-playsinline="" controls="controls" preload="auto" autoplay="autoplay" [src]="hls_url" style="margin-top: 0px;">
  <p>您的浏览器不支持 video 标签</p>
</video> -->
      <!--https://www.jianshu.com/p/d9e9a40fdedc-->
      <video [src]="hls_url" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" width="100%" height="100%" preload="auto"  x-webkit-airplay="true" controls="controls" autoplay="autoplay" class="video-js">
        <p>您的浏览器不支持 video 标签</p>
      </video>
      <!-- <video id="video-player" class="video-js" type="application/x-mpegURL" controls="true">
                  <source [src]="hls_url" type="application/x-mpegURL">
                  <p>您的浏览器不支持 video 标签</p>
      </video> -->
      <div class="poster" style="display: none;"><img [src]="roomData.room_src" id="video-poster">
        <div class="play-btn"></div>
        <div class="room-info">
          <span class="name">{{roomData?.room_name}}</span>
          <span class="class">{{roomData?.game_name}}</span>
        </div>
        <div class="room-stop-focus">
          <p class="stop-title">主播正在赶来路上~</p>
          <p class="stop-tip">赶快关注主播不错过下次开播~</p>
          <button class="stop-more hd-focus">关注</button>
        </div>
      </div>
    </div>
  </div>

  <ion-segment [(ngModel)]="segmentModel" color="primary">
    <ion-segment-button class="segment-activated" value="chat">
      <span>聊天</span>
    </ion-segment-button>
    <ion-segment-button value="anchor">
      <span>主播</span>
    </ion-segment-button>
    <ion-segment-button value="broadcast">
      <span>相关直播</span>
    </ion-segment-button>
  </ion-segment>

</ion-header>


<ion-content>
<page-room-chat *ngIf="segmentModel == 'chat'" [roomData]="roomData"></page-room-chat>
<page-room-anchor *ngIf="segmentModel == 'anchor'" [roomData]="roomData"></page-room-anchor>
<page-room-broadcast  *ngIf="segmentModel == 'broadcast'" [roomData]="roomData"></page-room-broadcast>
<!--  <div class="info-handle">
    <div id="sendBar" class="hd-item hd-send" (click)="showAlert()">
      <span class="icon"></span>
      &lt;!&ndash; <img class="icon" src="../assets/images/hd-send.png" alt=""> &ndash;&gt;发弹幕
      <b class="split-line"></b>
    </div>
    <div id="focusRoom" class="hd-item hd-focus" (click)="showAlert()">
      <span class="icon"></span>
      &lt;!&ndash; <img class="icon" src="../assets/images/hd-focus.png" alt=""> &ndash;&gt;关注
      <b class="split-line"></b>
    </div>
    <div id="shareRoom" class="hd-item hd-share" (click)="shareCtrl(1)">
      <span class="icon"></span>
      &lt;!&ndash; <img class="icon" src="../assets/images/hd-share.png" alt=""> &ndash;&gt;分享
    </div>
  </div>-->
</ion-content>
